<template>
  <div class="index">
    <el-row :gutter="20">
      <el-col :span="6">
        <template v-for="i in 4" :key="i">
         <el-skeleton style="width:100%" animated  loading  v-if="panels.length===0">
          <el-card style="max-width: 250px">
          <template #header>
            <div class="card-header flex justify-between">
              <span class="title"><el-skeleton></el-skeleton></span>
              <el-tag :type="item.unitColor"><el-skeleton></el-skeleton></el-tag>
            </div>
          </template>
          <div class="content text-3xl text-gray-500">
           <el-skeleton></el-skeleton>
          </div>
          <template #footer>
            <div class="footer flex justify-between text-gray-500">
              <div class="subtitle">
              <el-skeleton></el-skeleton>
              </div>
              <div class="value">
            <el-skeleton></el-skeleton>
              </div>
            </div>
          </template>
        </el-card>
        </el-skeleton>
        </template>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col
        :span="6"
        offset="0"
        v-for="(item, index) in panels"
        :key="index"
        class="panel flex-grow rounded"
      >
        <el-card  shadow="hover">
          <template #header>
            <div class="card-header flex justify-between">
              <span class="title">{{ item.title }}</span>
              <el-tag :type="item.unitColor">{{ item.unit }}</el-tag>
            </div>
          </template>
          <div class="content text-3xl text-gray-500">
               <CountoNum :value="item.value"></CountoNum>
          </div>
          <template #footer>
            <div class="footer flex justify-between text-gray-500">
              <div class="subtitle">
                {{ item.subTitle }}
              </div>
              <div class="value">
               {{ item.value }}
              </div>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <IndexNavs></IndexNavs>
    <el-row gutter="20">
     <el-col :span="12">
      <IndexChart></IndexChart>
     </el-col>
     <el-col :span="12">
     <Indexcart title="店铺及商品提示" tips="店铺及商品提示" :data="goods"></Indexcart>
     <Indexcart title="交易提示" tips="需要立即处理的交易订单" :data="order"></Indexcart>
     </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { usemainStore } from "@/stores/mainStore";
import { Logout } from "@/composible/utils";
import { getIndexInfo } from "@/api/index";
import { ref } from "vue";
import CountoNum from '@/components/CountTo.vue'
import IndexNavs from '@/components/IndexNavs.vue'
import IndexChart from "@/components/IndexChart.vue";
import Indexcart from "@/components/Indexcart.vue";
import {getStatistics2} from '@/api/index'
const { userInfo } = storeToRefs(usemainStore());
let panels = ref([]);
getIndexInfo().then((res) => {
  console.log(res.panels);
  panels.value = res?.panels;
});

//获取后台首页数据
let goods = ref([]);
let order = ref([]);
getStatistics2().then(res => {
  console.log(res);
  goods.value = res.goods;
  order.value = res.order;
})


</script>
<style lang="less" scoped>
</style>r